<template>
  <div v-if="showStatus" class="yxp-room-status">
  <div class="yxp-room-wrap">
    <div class="yxp-room-wrap-box">
      <div class="content-box">
        <div v-if="btnClassOut" @click="exitRoom" class="logout">
          <img src="@/assets/room/logout.png" />退出直播间
        </div>
        <div class="info">
          <div class="room-status teach-attend" v-if="isClassA">
            <img src="@/assets/room/yxp-room-logo.png" class="logo"/>
            <div class="btn" @click="doClassStart" v-if="btnClassStart">上课</div>
            <div class="tips" v-if="!btnClassStart && isTeacher">等待学生进入教室</div>
            <div class="tips" v-if="!btnClassStart && !isTeacher">等待老师进入教室</div>
          </div>
          <div class="room-status teach-attend" v-if="0">
            <img src="@/assets/room/yxp-room-logo.png" class="logo"/>
          </div>
          <div class="room-status teach-finish" v-if="isClassingWait">
            <img src="@/assets/room/study-await.png" class="status"/>
            <div class="tips">网络不稳定，正在恢复中…</div>
          </div>
          <div class="room-status study-finish" v-if="isClassEnd">
            <img src="@/assets/room/study-class.png" class="status-finish"/>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
let eventEmitter = BJY.eventEmitter
let auth = BJY.auth
let store = BJY.store
let wstore = window.localStorage
let waitConfTime = 0
export default {
  name: 'beforeStudy',
  data () {
    return {
      endLockTime: 0,
      isClassEnd: false,
      showStatus: false,
      btnClassOut: false,
      isClassA: false,
      btnClassStart: false,
      isTeacher: true,
      isClassingWait: false
    }
  },
  methods: {
    exitRoom () {
      window.location.href = `?r=${Math.random()}#/mycourse`
    },
    initStatus () {
      this.isClassEnd = false
      this.showStatus = false
      this.btnClassOut = false
      this.isClassA = false
      this.btnClassStart = false
      this.isClassingWait = false
      this.isTeacher = auth.isTeacher()
      console.log('eee',this.isTeacher);
    },
    doClassStart () {
      eventEmitter.trigger(eventEmitter.CLASS_START_TRIGGER)
    }
  },
  created () {
    waitConfTime = Number(this.$route.query.wait_time) || 1000*60*5
    let that = this
    eventEmitter.on(eventEmitter.ZWZ_CLASSING_START, (e, data) => {
      that.endLockTime = 0
      let waitTime = 0
      let $TT = new Date().getTime()
      let bclass = store.get('class')
      let opkey = `zwz:wait:${bclass.id}`
      let {classMode, count} = data
      let hasTeacher = false
      // 忽略隐身用户
      let userList = BJY.data.user.all().filter((v)=>{return v.status === 0})
      that.initStatus()
      if(/_SMALL/i.test(classMode)){
        for(let user of userList){
          if(user.type == 1){
            hasTeacher = true
            break
          }
        }
      }
      if((/_121/i.test(classMode) && count < 2) || (/_SMALL/i.test(classMode) && !hasTeacher)){//主控已掉线
        that.isClassingWait = true
        // 检测是否超时
        waitTime = Number(wstore.getItem(opkey)) || 0
        if(waitTime > 0){
          if(($TT - waitTime) > waitConfTime){
            if(auth.isStudent()){
              that.btnClassOut = true
            }
          }
        }else{
          wstore.setItem(opkey, $TT)
        }
        that.showStatus = true
      }else{
        wstore.removeItem(opkey)
        that.showStatus = false
      }
    })
    .on(eventEmitter.ZWZ_CLASSING_NOSTART, (e, data) => {
      let {classMode, count} = data
      let hasTeacher = false
      // 操作上锁终止-锁10秒
      if(that.endLockTime > 0 && (new Date().getTime() - that.endLockTime) < 1000*10 && auth.isStudent()) return false
      // 忽略隐身用户
      let userList = BJY.data.user.all().filter((v)=>{return v.status === 0})
      that.initStatus()
      that.isClassA = true
      if(/_SMALL/i.test(classMode)){
        for(let user of userList){
          if(user.type == 1){
            hasTeacher = true
            break
          }
        }
      }
      if((count >= 2 && /_121/i.test(classMode)) || (/_SMALL/i.test(classMode) && hasTeacher && userList.length >= 2)){//房间内有老师和学生
        if(auth.isTeacher()){
          that.btnClassStart = true
        }
      }
      that.btnClassOut = true
      that.showStatus = true
    })
    .on(eventEmitter.ZWZ_CLASS_BEFORE, (e, data) => {
      let {classMode, count} = data
      that.initStatus()
      that.isClassA = true
      if(1 || /_121/.test(classMode)){
        that.btnClassOut = true
        that.isClassA = true
        that.btnClassStart = false
      }
      that.showStatus = true
    })
    .on(eventEmitter.ZWZ_CLASS_END, (e, data) => {
      that.initStatus()
      if(auth.isStudent()){
        that.showStatus = true
        that.isClassEnd = true
        that.btnClassOut = true
        that.endLockTime = new Date().getTime()
      }else{
        that.exitRoom()
      }
    })
    .on(eventEmitter.ZWZ_CLASS_OVER, (e, data) => {
      if(that.endLockTime > 0) return false
      that.exitRoom()
    })
  },
  mounted () {
  }
}
</script>
<style lang='less'  scoped>
@media screen and (min-width: 1500px) and (max-width: 1920px) {
  .yxp-room-wrap {
    &-box {
      width: 1150px;
      height: 650px;
      .content-box {
        width: 1110px;
        height: 610px;
      }
    }
  }
}
@media screen and (min-width: 1920px) {
  .yxp-room-wrap {
    &-box {
      width: 1300px;
      height: 750px;
      .content-box {
        width: 1260px;
        height: 710px;
      }
    }
  }
}
@media screen and (max-width: 1500px) {
  .yxp-room-wrap {
    &-box {
      width: 900px;
      height: 500px;
      .content-box {
        width: 860px;
        height: 460px;
      }
    }
  }
}
.yxp-room-status {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 290PX); /* no */
  height: calc(100% - 40PX); /* no */
  // z-index: 998;
  z-index: 1001;
  background: url(../../assets/room/before-study-bg.png) center / 100% 100% no-repeat;
  background-size: cover;
  overflow: auto;
}
.yxp-room-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  min-width: calc(1300px - 290px);
  height: 100%;
  &-box {
    border: 20px solid rgba(255,255,255,.5);
    border-radius: 40px;
    .content-box {
      position: relative;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,.95);
      border-radius: 20px;
      .logout {
        position: absolute;
        right: 40px;
        top: 40px;
        color: #27BFA3;
        font-size: 2.8vh;
        font-family: Microsoft YaHei;
        font-weight: 400;
        cursor: pointer;
        img {
          display: inline-block;
          width: 2.8vh;
          height: 2.8vh;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
      .info {
        width: inherit;
        height: inherit;
        .room-status  {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          .logo {
            display: inline-block;
            width: 20%;
            height: auto;
          }
          .btn {
            width: 30%;
            height: 70px;
            color: #fff;
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 70px;
            text-align: center;
            background: linear-gradient(180deg, #13C998 0%, #27BFA3 100%);
            box-shadow: 0px 3px 6px rgba(23, 178, 145, 0.4);
            border-radius: 10px;
            margin: 10% auto 0;
            cursor: pointer;
          }
          .status {
            width: 228px;
            height: 76px;
          }
          .status-finish {
            width: 491px;
            height: 192px;
          }
          .tips {
            color: #27BFA3;
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            margin-top: 24px;
          }
        }
      }
    }
  }
}
</style>
